Developers.IOのブログ記事編集者を少し助けてくれるChrome拡張を作った話

今回は完全に社内向けです。Developers.IO編集者を少し助けてくれるChrome拡張 - Developers.IO編集アシスタントを作りました。といっても既に作ってから3ヶ月くらい経過しちゃってますが...。

#Chrome拡張機能

shoito

2019.07.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは。
Chrome大好きなshoitoです。

Developers.IO編集者を少し助けてくれるChrome拡張を作りました。
といっても既に作ってから3ヶ月くらい経過しちゃってますが...。

Developers.IO編集アシスタント https://chrome.google.com/webstore/detail/bognkipnhbbfhjkinldhepdglepjehpm

分かりにくいんですが、このChrome拡張により、動画の中で右側の「カテゴリ」と「特集カテゴリ」部分にある filter とplaceholderが表示されているテキストフィールドが自動的に追加されます。

解決したかった課題

Developers.IOの記事コンテンツの増加に伴い「カテゴリ」と「特集カテゴリ」の数も増加してきました。
2019-07-02 15:00時点でカウントしてみると「カテゴリ」が134個、「特集カテゴリ」が373個あります。

記事にあったカテゴリや特集カテゴリ、例えばカテゴリとして「AWS」、特集カテゴリとして「App Mesh」を割り当てようとすると、画面上でテキストとして検索しないといけないんですが、数が数なので面倒でした。

document.querySelectorAll('#categorychecklist li').length
134

document.querySelectorAll('#referencecatchecklist li').length
373

解決方法

動画にあるように、記事編集画面で「カテゴリ」と「特集カテゴリ」をインクリメンタルサーチできるようにしました。
インクリメンタルサーチのための入力フィールドの構築はUserScriptをインジェクションすることでできるのですが、今回は配布の仕組みを考慮してChromeウェブストアで配布できるように、Chrome拡張にしました。

コントロール可能な配布の仕組み - Chromeウェブストア

Chromeウェブストアでは、Chrome拡張を一般公開するだけでなく、URLを知ってる人にだけ公開する「限定公開」も可能です。
関係者にだけ、配布したいようなときに、限定公開は便利です。

何かツールを開発しても、自分で潜在ユーザーに周知し、インストール＆アップデートし続けてもらうのは難しいですし、どれくらいのユーザー数か、どんな属性の人たちか、トラッキングする仕組みまで自分で準備するのは無理があります。

そこで、AppStoreやGoogle Playストア、Chromeウェブストア、Firefox Add-onsのようなプラットフォームに特化したソフトウェアの公開サービスがあると、上記の課題が解決できます。

公開URLが発行され、ユーザーに簡単に配布できますし、新バージョンのリリース通知や自動アップデートの仕組みがあるため、気楽にバグ修正や機能追加ができます。開発者としては。ユーザーに最新版だけ使ってもらい、複数のリリースバージョンのメンテナンスはしたくありません。

実装

上記でUserScriptでできると書きましたが、実体は以下の20行程度のコードです。
このコードを記事編集画面のURLにアクセスした際に、Chrome拡張でインジェクションします。
appendFilter により、インクリメンタルサーチ用のテキストフィールドがカテゴリ用と特集カテゴリ用に追加される仕組みです。

せいぜい数百件なので、検索文字入力の度にグルグルと探して、カテゴリを絞り込んでます。